<template>
    <e-charts class="popup-line-box" :options="options" />
</template>

<script>
import ECharts from "@/component/ECharts";

export default {
    name: "PopupLineOne",

    components: {
        ECharts,
    },

    props: {
        data: {
            type: Array,
            default() {
                return [];
            },
        },
    },

    data() {
        return {};
    },

    computed: {
        options() {
            return {
                color: ["#ff6068", "#49a0ff", "#00ff00", "#9605cf"],
                title: {
                    text: "位移过程",
                    top: "1%",
                    left: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 16,
                    },
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    top: "8%",
                    right: 30,
                    itemWidth: 50,
                    itemGap: 30,
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    top: "24%",
                    left: "6%",
                    right: "8%",
                    bottom: "14%",
                    containLabel: true,
                },
                dataZoom: {
                    show: true,
                    realtime: true,
                    xAxisIndex: [0, 1],
                    textStyle: {
                        color: "#fff",
                    },
                },
                xAxis: {
                    type: "category",
                    name: "时间",
                    // boundaryGap: false,
                    nameTextStyle: {
                        color: "#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#999",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    data: this.data.map((item) => item.theDate),
                },
                yAxis: {
                    name: "单位(mm)",
                    type: "value",
                    nameTextStyle: {
                        color: "#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#999",
                            width: 2,
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.18)",
                            type: "dashed",
                        },
                    },
                },
                series: [
                    {
                        name: "X方向",
                        type: "line",
                        stack: "总量",
                        data: this.data.map((item) => item.data),
                    },
                ],
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.popup-line-box {
    width: 100%;
    height: 100%;
}
</style>
